@import (reference) 'config';
@import (reference) '../../../app/less/typography';

md-dialog.modal-receive {
  md-dialog-content {

    position: relative;
    padding: 0;
    overflow: hidden;
    color: @color-disabled-900;

    .modal-content,
    .tab-container,
    .tab-body-wrap,
    w-tabs,
    w-tab,
    .step-list,
    w-step-by-step,
    w-step,
    w-step > div {
      height: 100%;
    }

    .button-wrapper-height {
      min-height: 54px;

      a {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        display: block;
        height: 54px;
      }
    }

    .tab-tem {
      padding: 40px 40px 0;
      display: block;
      max-height: calc(90vh ~'- 60px');
      overflow: auto;

      &::after {
        display: block;
        content: '';
        width: 100%;
        height: 40px;
      }
    }

    .modal-content {
      overflow: auto;
      position: relative;

      .plate-warning {
        margin: 10px 0 20px;
        &.server-error {
          margin-bottom: 30px;
        }
      }

      .plate-warning.margin-1 {
        margin-bottom: 10px;
      }

      .plate-note {
        margin: 10px 0 20px;
      }
    }

    &::after {
      display: none;
    }

    w-select .select-list {
      max-height: 325px;
      overflow: auto;
    }

    .flex-row {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .amount-wrap {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;

      w-input,
      w-select {
        flex-basis: 48%;
      }

      w-input.long {
        flex-basis: 100%;
      }

      w-input .w-input-wrap input[type="text"] {
        padding-right: 50px;
      }
    }

    .amount-modal-icon {
      background-image: url(/img/icons/double-arrow.svg);
      background-size: 100% 100%;
      width: 24px;
      height: 20px;
      margin: 7px;
    }

    w-balance-input {
      width: 204px;
    }

    .asset {
      &__name {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: 15px;
        @media screen and (max-width: 540px) {
          font-size: 13px;
        }
      }

      &__id {
        font-size: 11px;
        line-height: 1em;
        @media screen and (max-width: 540px) {
          font-size: @font-size-caption-4;
        }
      }
    }


    .card-icons {
      position: absolute;
      width: 84px;
      right: 0;
      top: 0;
      display: flex;
    }

    .receive-confirm,
    w-confirm-tran.saction {
      display: block;
      padding: 0 40px 0;
      max-height: calc(90vh ~'- 60px');

      &::after {
        content: '';
        display: block;
        height: 40px;
      }
    }

    .receive-confirm {
      min-height: 220px;
      max-height: auto;
    }

    .receive-user-status {
      position: relative;
      min-height: 130px;
      &.pending {
        min-height: 60px;
      }
    }

    .verified-input {
      align-items: center;
      display: flex;

      i {
        background: url(/img/icons/input-valid-icon.svg) center no-repeat rgba(129, 201, 38, 0.1);
        display: block;
        width: 30px;
        height: 30px;
        margin-right: 12px;
        border-radius: 50%;
      }
    }

    .or {
      margin: 33px 0 22px;
    }

    .scan {
      margin-bottom: 20px;
      text-align: center;
    }

    .center {
      background-color: @color-white;
      width: 100%;
      height: 100%;
    }

    .country-list-link {
      text-align: right;
      a {
        display: inline-block;
      }
    }

    table.steps {
      margin: 16px 0 20px 0;
      border-collapse: collapse;

      td {
        padding: 16px;
        border: 1px solid @color-basic-200;
        vertical-align: top;

        &.step {
          min-width: 80px;
          background: @color-basic-50;
        }
      }
    }
  }
}


@media screen and (max-width: 768px) {
  w-select {
    .select {
      .title {
        padding-left: @padding-control-big-responsive-horizontal;
      }
    }
  }
}

@media screen and (max-width: 540px) {
  md-dialog.modal-receive {
    md-dialog-content {
      .modal-content {

        .receive-confirm,
        w-confirm-transaction {
          padding: 40px 20px 0;
          max-height: calc(100% + 60px);

          &::after {
            content: '';
            display: block;
            height: 20px;
          }
        }

        .tab-tem {
          padding: 40px 20px 0;
        }

        .receive-confirm {
          min-height: 220px;
          padding-bottom: 50px;
        }

        .icon-close {
          right: 10px;
        }
      }
    }
  }
}

@media screen and (max-width: 420px) {
  w-balance-input w-input .w-input-wrap input[type="text"].big,
  w-select .select .title {
    font-size: @font-size-caption-1;
  }
}

@media screen and (max-width: 420px) {
  md-dialog.modal-receive {
    .visa-icon,
    .mastercard-icon {
      margin-top: -12px;
    }
  }
}
